<template>
  <div>
    <div class="outDiv">
      <div class="backToPer">
        <!-- <go-back v-if="backToDetailType" :aa="preUrl" :bb="backToDetailType"></go-back>
        <go-back v-else :aa="preUrl"></go-back> -->
        <headerBack></headerBack>  
      </div>
      <scroller lock-x>
        <div class="mainDiv">
          <div class="catalog_title">
            <div class="catalog_name">{{ catalogName }}</div>
            <div class="catalog_code">专业代码 {{ catalogCode }}</div>
          </div>
          <div class="chooseTab">
            <div :class="['marjors', tabItem == 1 ? 'active' : '']" @click="chooseTabItem(1)">专业列表</div>
            <div class="line">|</div>
            <div :class="['schools', tabItem == 2 ? 'active' : '']" @click="chooseTabItem(2)">推荐院校排名</div>
          </div>

          <!-- 专业列表 -->
          <ul class="major_lists" v-show="tabItem == 1">
            <li class="major_item" v-for="(item, index) of majorsList" :key="index" @click="jumpToDetail(item.major_code)">
              <div class="major_left">
                <div class="name">{{ item.major_name }}</div>
                <div class="code">{{ item.major_code }}</div>
              </div>
              <div class="major_right"></div>
            </li>
          </ul>
          
          <!-- 推荐院校列表 -->
          <ul class="school_lists" v-show="tabItem == 2">
            <li class="school_item" v-for="(item, index) of schools" :key="index" @click="jumpToUni(item.academy_code)">
              <div class="school_left">{{ item.academy_name }}</div>
              <div class="school_right">
                <span>{{ item.score }}</span>
                <img src="~/static/images/collage_icon_arrow_right.png" >
              </div>
            </li>
          </ul>

        </div>
      </scroller>
      <BuyVip :xBuy="showBuyVip" :returnUrl="returnUrl" serverName="专业库查看详情" @handleCloseBuyDialog="handleCloseBuyDialog"></BuyVip>
    </div>      
  </div>  
</template>

<script>
import headerBack from '~/components/headerBack'
import { getbycatalogcode, getmajorlistbyname } from '~/api/repository'
import ls from 'store2';
import { getMyVip } from "~/api/identity";
import BuyVip from '~/components/BuyVip'
export default {
  components: {
    headerBack,
    BuyVip
  },
  mounted() {
    this.catalogName = this.$route.query.type
    this.getMajorListByName(this.catalogName)
    this.returnUrl = '/h5-stu-wx/#' + this.$route.fullPath
    ls.remove('majorDetailQueryData')
    
    if (ls.get('choTab') == 'school') {
      this.tabItem = 2;
      
    } else {
      this.tabItem = 1;
    }
  },
  data() {
    return {
      catalogName: '', // 专业类--名称
      catalogCode: null, // 专业类--代码
      majorsList: '', // 专业列表
      schools: null, // 推荐院校列表
      tabItem: 1, // tab选项   ---->   1: 专业列表  2：推荐院校排名
      showBuyVip: false,
      returnUrl: null,
    }
  },
  methods: {
    getMajorListByName(name) {
      getmajorlistbyname({ catalog_name: name }).then(res => {
        const data = res.data[0]
        this.catalogCode = data.catalog_code
        this.majorsList = data.majors
        this.getRecommendSchools();
      })
    },
    handleCloseBuyDialog() {
      this.showBuyVip = false
    },
    chooseTabItem(status) {
      this.tabItem = status;
      if (status == 2) { // 推荐院校排名
        ls.set('choTab', 'school');
        if (!this.schools) { // 如果推荐院校列表为空的时候，查询推荐院校。
          this.getRecommendSchools();
        }

      } else {
        ls.set('choTab', 'major');
      }
    },
    // 获取推荐院校
    getRecommendSchools() {
      this.$vux.loading.show();
      getbycatalogcode({ catalog_code: this.catalogCode }).then(res => {
        if (res.code == 200) {
          this.schools = res.data;
        } else {
          this.$vux.toast.text('网络故障，请重试~');
        }
        this.$vux.loading.hide();
      }).catch(error => {
        this.$vux.toast.text(error);
        this.$vux.loading.hide();
      })
    },
    // 跳转到院校
    jumpToUni(code) {
      let applsData = {
        academyCode: code,
        userId: ls.get('yxkData').userId,
        province: ls.get('userArea')
      }
      ls.set('applsData', applsData)
      // ls.set('preUrl', '../professional/majorList')
      window.location.href =  process.env.workUrl + '/sx985/#/university/univImgDetail?sx_token=' + ls.get('tokens') + '&sx_userId=' + ls.get('yxkData').userId + '&academyCode=' + code + '&sx_userArea=' + encodeURI(ls.get('userArea'));
    },
    // 跳转到专业详情
    jumpToDetail(code) {
      this.$vux.loading.show()
      getMyVip(ls.get('userType')).then(res => {
        if (res.data.isVIP) {
          // ls.set('preUrl', '../professional/majorList');
          const params = {
            typeId: ls.get('userType'),
            code: code
          }
          this.goto('/professional/detail', JSON.stringify(params))
        } else {
          this.showBuyVip = true
        }
      }).finally(() => {
        this.$vux.loading.hide()
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },  
  }
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    
    /deep/ .top {
      background: #FFF; 
    }

    .backToPer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      z-index: 100;
    }

    .mainDiv {
      padding-top: 0.8rem;

      .catalog_title {
        background: #fff;
        padding: 0.32rem;
        margin-bottom: 0.24rem;
  
        .catalog_name {
          color: #222;
          font-size: 0.36rem;
          line-height: 0.57rem;
          font-weight: bold;
          margin-bottom: 0.16rem;
        }
  
        .catalog_code {
          color: #999;
          font-size: 0.24rem;
          line-height: 0.33rem;
        }
  
      }
  
      .chooseTab {
        background: #fff;
        padding: 0.32rem;
        border-bottom: 1px solid #E5E8ED;
        display: flex;
        justify-content: flex-start;
        align-items: center;
  
        .marjors, .schools {
          color: #999;
          font-size: 0.3rem;
          line-height: 0.4rem;
          font-weight: normal;
        }
  
        .active {
          font-weight: bold;
          color: #80D566;
        }
  
        .line {
          margin: 0 0.32rem;
          color: #E5E8ED;
        }
  
      }
  
      .major_lists {
        background: #fff;
        padding: 0 0.32rem 1rem;
  
        .major_item {
          height: 1.12rem;
          line-height: 1.12rem;
          width: 100%;
          border-bottom: 1px solid #E5E8ED;
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .major_left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
  
            .name {
              color: #222;
              font-size: 0.32rem;
              font-weight: bold;
            }
  
            .code {
              color: #999;
              font-size: 0.26rem;
              margin-left: 0.24rem;
            }
          }
  
          .major_right {
            width: 0.4rem;
            height: 0.4rem;
            display: inline-block;
            background: url('~/static/images/collage_icon_arrow_right.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
  
      .school_lists {
        background: #fff;
        padding: 0 0.32rem 1rem;
  
        .school_item {
          height: 1.12rem;
          line-height: 1.12rem;
          width: 100%;
          border-bottom: 1px solid #E5E8ED;
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .school_left {
            color: #222;
            font-size: 0.3rem;
            font-weight: bold;
          }
  
          .school_right {
            display: flex;
            justify-content: flex-start;
            align-items: center;
  
            span {
              color: #999;
              font-size: 0.26rem;
              margin-right: 0.16rem;
            }
  
            img {
              width: 0.4rem;
              height: 0.4rem;
            }
  
          }
        }
      }

    }


  }  
</style>
